import { useStore } from 'vuex'
import { computed, ref, watch } from 'vue'

export default function useCd () {
  const store = useStore()

  const cdRef = ref()
  const cdImageRef = ref()
  const playing = computed(() => store.state.playing)
  const cdCls = computed(() => (playing.value ? 'playing' : ''))

  // 同步旋转角度
  const syncTransform = (wrapper, inner) => {
    // 用于获取元素当前计算后的样式
    const wrapperTransform = getComputedStyle(wrapper).transform
    const innerTransform = getComputedStyle(inner).transform
    /**
     * 未旋转时："none"。
     * 旋转时："matrix(0.866, 0.5, -0.5, 0.866, 0, 0)"（表示旋转 30 度）
     */
    // wrapper上，没有设置transform，①第一次打印wrapperTransform为none②第二次已经赋值过
    wrapper.style.transform =
      wrapperTransform === 'none'
        ? innerTransform
        : innerTransform.concat('', wrapperTransform)
  }
  watch(playing, (newPlaying) => {
    if (!newPlaying) {
      syncTransform(cdRef.value, cdImageRef.value)
    }
  })
  return { cdCls, cdRef, cdImageRef }
}
